﻿@model List<SysMenu>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navbar-global {
            background-color: indigo;
        }

            .navbar-global .navbar-brand {
                color: white;
            }

            .navbar-global .navbar-user > li > a {
                color: white;
            }

        .navbar-primary {
            
            background-color: #333;
            bottom: 0px;
            left: 0px;
            position: absolute;
            top: 112px;
            width: 220px;
            z-index: 8;
            overflow: hidden;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }

            .navbar-primary.collapsed {
                width: 60px;
            }

                .navbar-primary.collapsed .glyphicon {
                    font-size: 22px;
                }

                .navbar-primary.collapsed .nav-label {
                    display: none;
                }

        .btn-expand-collapse {
            position: absolute;
            display: block;
            left: 0px;
            bottom: 0;
            width: 100%;
            padding: 8px 0;
            border-top: solid 1px #666;
            color: grey;
            font-size: 20px;
            text-align: center;
        }

            .btn-expand-collapse:hover,
            .btn-expand-collapse:focus {
                background-color: #222;
                color: white;
            }

            .btn-expand-collapse:active {
                background-color: #111;
            }

        .navbar-primary-menu,
        .navbar-primary-menu li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .navbar-primary-menu li a {
                display: block;
                padding: 10px 18px;
                text-align: left;
                border-bottom: solid 1px #444;
                color: #ccc;
            }

                .navbar-primary-menu li a:hover {
                    background-color: #000;
                    text-decoration: none;
                    color: white;
                }

                .navbar-primary-menu li a .glyphicon {
                    margin-right: 6px;
                }

                .navbar-primary-menu li a:hover .glyphicon {
                    color: orchid;
                }

        .main-content {
            margin-top: 60px;
            margin-left: 200px;
            padding: 20px;
        }

        .collapsed + .main-content {
            margin-left: 60px;
        }
    </style>
</head>
<body>
    <nav class="navbar-primary" style="position: fixed;">
        <a href="#" class="btn-expand-collapse"><span class="glyphicon glyphicon-menu-left"></span></a>
        <ul class="navbar-primary-menu">
            <li>
                @{
                    if (Model != null)
                    {
                        foreach (SysMenu m1 in Model)
                        { 
                            <a href="/@m1.ControllerName/@m1.ActionName" target="_self"><span class="glyphicon glyphicon-list-alt"></span><span class="nav-label">@m1.MenuName</span></a>
                        }
                    }
                    else
                        Console.WriteLine("no Data");
                }
            </li>
        </ul>
    </nav>
</body>
<script>
    $(".btn-expand-collapse").click(function (e) {
        $(".navbar-primary").toggleClass("collapsed");
    });

</script>
</html>